<template>
  <Dialog title="增加仓库" :loading="loading" class="single-column" :visible="visible" button-text="保存" @close="handleClose" @confirm="handleConfirm">
    <div>
      <el-form ref="formRef" :model="currentRow" :rules="rules" label-width="100px">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="currentRow.name" style="width: 235px;" />
        </el-form-item>
        <el-form-item label="发放职能：" prop="grant">
          <el-checkbox-group v-model="grant">
            <el-checkbox label="前台仓库" />
            <el-checkbox label="领用仓库" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="操作员：" prop="operator" style="width: 100px;">
          <el-select v-model="idList" multiple value-key="id" collapse-tags placeholder="请选择" class="el-select-y" style="width: 235px;" @change="operatorChange">
            <el-option v-for="item in allUserOptions" :key="item.id" :label="item.usrName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-radio v-model="currentRow.status" label="启用" />
          <el-radio v-model="currentRow.status" label="停用" />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog";
import { setLocalStorage } from "@monkey.do/monkey";
export default {
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentRow: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      ruleForm: {
        status: "启用",
      },
      grant: [],
      allUserOptions: [],
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
      },
      idList: [],
    };
  },
  watch: {
    currentRow: {
      handler(val) {
        console.log(val, '6666');
        this.idList = [];
        if (val.operator) {
          val.operator.map(item => {
            // item.usrName = item.operator;
            // item.id = item.operatorId;
            this.idList.push(item.operatorId);
          });
        }
        // this.currentRow.operator = val.operator;
        this.ruleForm = JSON.parse(JSON.stringify(val));
        if (val.grant) {
          this.grant = val.grant.split(',');
        }
      },
      deep: true,
    },
    visible: {
      handler(val) {
        if (val && !this.currentRow.id) this.ruleForm = { status: '启用' };
      },
    },
  },
  mounted() {
    this.fetchAllUsr();
  },
  methods: {
    // 获取全部医院人员
    async fetchAllUsr() {
      const res = await this.$api['doctor/consulting/getAllUsr']();
      if (res.code !== 200) return this.$message.error('查询操作人员失败！');
      this.allUserOptions = res.data;
    },
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('update:currentRow', {});
      this.$refs.formRef.resetFields();
      this.ruleForm = {};
      this.grant = [];
    },
    handleConfirm() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return;
        this.ruleForm.grant = this.grant.toString();
        // this.ruleForm.operator.map(item => {
        //   item.operator = item.usrName;
        //   item.operatorId = item.id;
        // });
        this.loading = true;
        if (this.currentRow.id) {
          this.$api[`data/storehouse/update`](this.ruleForm).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('修改仓库成功');
            this.loadWareHouse();
            this.handleClose();
          }).finally(() => (this.loading = false));
        } else {
          this.$api[`data/storehouse/create`](this.ruleForm).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('增加仓库成功');
            this.loadWareHouse();
            this.handleClose();
          }).finally(() => (this.loading = false));
        }
      });
    },
    loadWareHouse() {
      // 导入库房做本地缓存
      this.$api['data/storehouse/list']({ page: 1, pageSize: 99999 }).then(res => {
        if (res.code !== 200) return;
        setLocalStorage("WARE_HOUSE", res.data.result);
      });
    },
    operatorChange(idList) {
      console.log(idList);
      if (idList) {
        this.ruleForm.operator = [];
        idList.forEach(id => {
          this.allUserOptions.forEach(item => {
            if (item.id === id) {
              this.ruleForm.operator.push({
                operator: item.usrName,
                operatorId: item.id,
              });
            }
          });
        });
      } else {
        this.ruleForm.operator = [];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-magin-y{
  margin: 0 150px;
}
</style>
